<template>
  <div id="main-content">
    <div class="content">
      <el-page-header @back="goBackToList" title="返回列表" content="图片管理"></el-page-header>
      <div class="toolBar">
        <el-link
          class="info_link"
          type="primary"
          @click="hrefTo('hourseBaseInfo')"
          icon="el-icon-s-home"
        >基本信息</el-link>
        <el-link
          class="info_link"
          type="primary"
          @click="hrefTo('hourseEstateInfo')"
          icon="el-icon-house"
        >小区信息</el-link>
        <el-link class="info_link" type="primary" icon="el-icon-picture" disabled>
          <h3>图片管理</h3>
        </el-link>
        <el-link
          class="info_link"
          type="primary"
          @click="hrefTo('hourseOpeningInfo')"
          icon="el-icon-star-on"
        >开盘信息</el-link>
        <el-link class="info_link" type="primary" icon="el-icon-platform-eleme">预售许可证信息</el-link>
        <el-link
          class="info_link"
          type="primary"
          @click="hrefTo('hourseSaleInfo')"
          icon="el-icon-s-shop"
        >销售信息</el-link>
        <el-link class="info_link" type="primary" href icon="el-icon-s-promotion">相关房产</el-link>
      </div>
      <el-form ref="form" label-width="150px" :inline="true">
        <el-button type="success" icon="el-icon-plus" @click="addOne">增加</el-button>
        <div
          v-for="(hourseImage,index) in hourseImages"
          :key="'hourseImage-'+index"
          class="hourseImage-content"
        >
          <el-form-item label="图片类型">
            <el-select v-model="hourseImage.imageType" placeholder="请选择">
              <el-option
                v-for="item in imageTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片预览">
            <img :src="hourseImage.imgUrl" alt="" width="60px" height="80px" @click="handlePictureCardPreview(hourseImage.imgUrl)" title="点击展示大图">
          </el-form-item>
          <el-form-item label="图片上传">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="uploadImgAction"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :limit="1"
              :file-list="fileList"
              list-type="text"
              :on-success="(res,file)=>uploadImgSuccess(res,index)"
            >
                <i class="el-icon-upload" title="点击上传图片" slot="trigger"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="图片说明">
            <el-input v-model="hourseImage.imgExplain" style="width:300px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" title="保存" @click="saveHourseImg(hourseImage)">保存</el-button>
            <el-button type="danger" @click="removeOne(hourseImage,index)" title="删除">删除</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-dialog :visible.sync="dialogImgVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import { imageTypes } from "@/constants/constants.js";

export default {
  data() {
    return {
      hourseId: "",
      submitLoading: false,
      dialogImgVisible: false,
      imageTypes: imageTypes,
      hourseImages: [
        {
          id: "",
          hourseId: "",
          imageType: "",
          imgUrl: "",
          imgExplain: ""
        }
      ],
      fileList: [],
      uploadImgAction: "",
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  methods: {
    saveHourseImg(hourseImage) {
      if (!hourseImage.imageType) {
        this.$message({
          title: "提示",
          message: "请选择图片类型",
          type: "warning"
        });
        return false;
      }
      if (!hourseImage.imgUrl) {
        this.$message({
          title: "提示",
          message: "请选择图片",
          type: "warning"
        });
        return false;
      }
      this.submitLoading = true;
      hourseImage.hourseId = this.hourseId;
      this.$http.post("/api/hourseImages/save", hourseImage).then(response => {
        hourseImage = response.data;
        this.$message({
          title: "提示",
          message: "保存成功",
          type: "success"
        });
        this.submitLoading = false;
      });
    },
    getHourseImage(hourseId) {
      this.$http.get("/api/hourseImages/query/" + hourseId).then(response => {
        if (response && response.data && response.data.length > 0) {
          this.hourseImages = response.data;
        } else {
          this.hourseImages = [
            {
              id: "",
              hourseId: "",
              imageType: "",
              imgUrl: "",
              imgExplain: ""
            }
          ];
        }
      });
    },
    hrefTo(moduleName) {
      this.$router.push("/" + moduleName + "/" + this.hourseId);
    },
    addOne() {
      this.hourseImages.push({
        id: "",
        hourseId: "",
        imageType: "",
        imgUrl: "",
        imgExplain: ""
      });
    },
    removeOne(hourseImage, index) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.hourseImages.splice(index, 1);
        if (hourseImage.id) {
          this.deleteHourseImg(hourseImage.id);
        }
      });
    },
    deleteHourseImg(id) {
      this.$http.get("/api/hourseImages/delete/" + id).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      });
    },
    goBackToList() {
      this.$router.push("/hourseList");
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // submitUpload() {
    //   this.$refs.upload.submit();
    // },
    uploadImgSuccess(response, index) {
      this.$message({
        title: "提示",
        message: "上传成功",
        type: "success"
      });
      this.hourseImages[index].imgUrl = response;
      this.fileList = [];
    },
    handlePictureCardPreview(fileUrl) {
      this.dialogImageUrl = fileUrl;
      this.dialogImgVisible = true;
    }
  },
  created() {
    this.hourseId = this.$route.params.hourseId;
    this.uploadImgAction = "/api/uploadImage/main/" + this.hourseId;
    this.getHourseImage(this.hourseId);
  }
};
</script>
<style scoped>
.hourseImage-content {
  border: 1px solid #ebebeb;
  margin-top: 5px;
  padding: 5px;
}
</style>